<template>
  <div class="container">
    <el-card class="interviewSkills">
      <el-row :gutter="24">
        <el-col :span="20">
          <!-- 头部搜索 -->
          <el-form
            ref="Searchform"
            :model="Query"
            label-width="80px"
            class="SearchStyle"
          >
            <!-- 关键字 -->
            <el-form-item label="关键字">
              <el-input
                v-model="Query.Keyword"
                class="SearchInput"
                clearable
              ></el-input>
            </el-form-item>
            <!-- 状态 -->
            <el-form-item label="状态">
              <el-select
                v-model="Query.state"
                placeholder="请选择"
                class="SearchInput"
              >
                <el-option label="已禁用" :value="ling"></el-option>
                <el-option label="已启用" :value="yi"></el-option>
              </el-select>
            </el-form-item>
            <!-- 搜索/清除 -->
            <el-form-item class="Searchbtn">
              <!-- 清除 -->
              <el-button size="small" @click="removeInput" native-type="button">
                清除
              </el-button>
              <!-- 搜索 -->
              <el-button
                type="primary"
                size="small"
                @click="SerachHnadel"
                native-type="button"
                >搜索
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 新增技巧 -->
        <el-col :span="3" class="skills">
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="adddialogVisible = true"
          >
            新增技巧
          </el-button>
        </el-col>
        <!-- 提示信息 -->
        <el-alert :title="title" type="info" show-icon :closable="false">
        </el-alert>
        <!-- 表格数据 -->
        <el-table :data="InterviewTips" border style="width: 100%" stripe>
          <!-- 序号 -->
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <!-- 文章标题 -->
          <el-table-column prop="title" label="文章标题" width="300">
            <template v-slot="{ row }">
              <span>{{ row.title }}</span>
              <i
                class="el-icon-film"
                v-if="row.videoURL !== null"
                @click="filmHander(row)"
              ></i>
            </template>
          </el-table-column>
          <!-- 阅读数 -->
          <el-table-column prop="visits" label="阅读数" width="70">
          </el-table-column>
          <el-table-column prop="username" label="录入人"> </el-table-column>
          <!-- 录入时间 -->
          <el-table-column label="录入时间">
            <template v-slot="{ row }">
              <span>{{
                row.createTime | parseTimeByString('{y}-{m}-{d} {h}:{i}:{s}')
              }}</span>
            </template>
          </el-table-column>
          <!-- 状态 -->
          <el-table-column prop="state" label="状态">
            <template v-slot="{ row }">
              {{ row.state ? '已启用' : '已禁用' }}
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button type="text" size="small" @click="previewBtn(row)">
                预览
              </el-button>
              <el-button
                type="text"
                size="small"
                v-if="row.state"
                @click="stateHandelbtn(row.state, row.id)"
              >
                禁用
              </el-button>
              <el-button
                type="text"
                size="small"
                v-else
                @click="stateHandelbtn(row.state, row.id)"
              >
                启用
              </el-button>
              <el-button
                type="text"
                size="small"
                :disabled="row.state === 1"
                @click="edit(row)"
              >
                修改
              </el-button>
              <el-button
                type="text"
                size="small"
                :disabled="row.state === 1"
                @click="deleteArticles(row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Query.page"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="Query.pagesize"
          layout=" sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 视频预览 -->
    <el-dialog :visible.sync="videodialogVisible" width="55%">
      <videoPreview
        :videourl="videoUrl"
        v-if="videodialogVisible"
      ></videoPreview>
    </el-dialog>
    <!-- 文章预览 -->
    <el-dialog
      title="预览文章"
      :visible.sync="previewdialogVisible"
      width="50%"
      class="previewDialog"
      v-if="previewdialogVisible"
    >
      <!-- 预览文章组件 -->
      <previewArticle
        :articleid="articleId"
        :enterOne="enterOne"
        :visits="visits"
      ></previewArticle>
    </el-dialog>
    <!-- 添加文章组件 -->
    <el-dialog title="添加" :visible.sync="adddialogVisible" width="50%">
      <!-- 添加文章 -->
      <addArticle
        @colse="adddialogVisible = false"
        @addArtDate="addDialogArtHandle"
      ></addArticle>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog title="修改" :visible.sync="editdialogVisible" width="50%">
      <!-- 修改文章 -->
      <editActivel
        v-if="editdialogVisible"
        :editlist="editlist"
        @colse="editdialogVisible = false"
        @editArtdata="editArticleData"
      ></editActivel>
    </el-dialog>
  </div>
</template>

<script>
import { list, changeState, add, remove } from '../../api/hmmm/articles'
import videoPreview from '../components/videoPreview.vue'
import previewArticle from '../components/articles-preview.vue'
import addArticle from '../components/articles-add.vue'
import editActivel from '../components/article-edit.vue'
export default {
  name: 'interviewSkills',
  data() {
    return {
      Query: {
        page: 1, // 当前页
        pagesize: 10, // 每页条数
        Keyword: null, // 关键字
        state: null // 状态
      },
      ling: 0,
      yi: 1,
      counts: 0,
      title: '',
      videoUrl: '',
      // 表格数据源
      InterviewTips: [],
      videodialogVisible: false, // 视频预览
      previewdialogVisible: false, // 文章预览
      adddialogVisible: false, // 添加文章
      editdialogVisible: false,
      articleId: '', // 文章id
      enterOne: '', // 录入人
      visits: '', // 浏览次数
      editlist: {}
    }
  },
  components: {
    videoPreview,
    previewArticle,
    addArticle,
    editActivel
  },
  created() {
    this.getinterviewSkillsList()
    console.log(this.articleId)
  },
  methods: {
    /** 获取面试技巧数据 **/
    async getinterviewSkillsList() {
      try {
        const { data } = await list(this.Query)
        console.log(data)
        this.InterviewTips = data.items
        this.counts = data.counts
        this.title = `数据一共${this.counts}条`
      } catch (error) {
        this.$message({
          type: 'error',
          message: '获取数据失败!'
        })
      }
    },
    /** pageSize 每页多少条数据改变时会触发 **/
    handleSizeChange(size) {
      this.Query.pagesize = size
      this.getinterviewSkillsList()
    },
    /** pagenum 当前页改变时触发 **/
    handleCurrentChange(num) {
      this.Query.page = num
      this.getinterviewSkillsList()
    },
    /** 按钮-->弹框 **/
    filmHander(row) {
      this.videodialogVisible = true
      // console.log(row);
      this.videoUrl = row.videoURL
    },
    /** 搜索 **/
    SerachHnadel() {
      this.getinterviewSkillsList()
    },
    /** 清除 **/
    removeInput() {
      this.Query.Keyword = null
      this.Query.state = null
      this.getinterviewSkillsList()
    },
    /** 预览按钮 **/
    previewBtn(row) {
      // console.log(row);
      this.previewdialogVisible = true
      // 文章id
      this.articleId = row.id
      // 录入人
      this.enterOne = row.username
      // 浏览次数
      this.visits = row.visits
    },
    /** 状态按钮 **/
    // stete 状态 id 文章id
    async stateHandelbtn(state, id) {
      let newstate = ''
      if (state === 0) {
        newstate = 1
      } else {
        newstate = 0
      }
      const obj = {
        state: newstate,
        id: id
      }
      try {
        await changeState(obj)

        this.getinterviewSkillsList()
        this.$message({
          type: 'success',
          message: '修改状态成功!'
        })
      } catch (error) {
        return this.$message({
          type: 'success',
          message: '修改状态失败!'
        })
      }
    },
    /** 添加数据 **/
    async addDialogArtHandle(date) {
      try {
        await add({
          title: date.title,
          articleBody: date.articleBody,
          videoURL: date.videoURL
        })
        this.$message.success('添加成功')
        this.adddialogVisible = false
        this.getinterviewSkillsList()
      } catch (error) {
        return this.$message.error('添加数据失败!')
      }
    },
    /** 删除文章 **/
    async deleteArticles(row) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该文章, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      // 如果点击了取消  不等于 confirm
      if (confirmResult !== 'confirm') {
        return this.message({ type: 'info', message: '已取消删除' })
      }
      // 删除
      try {
        await remove(row)
        this.$message.success('删除成功')
        this.getinterviewSkillsList()
      } catch (error) {
        return this.$message.error('删除失败')
      }
    },
    edit(row) {
      this.editdialogVisible = true
      this.editlist = row
    },
    /** 修改数据 **/
    async editArticleData() {
      this.editdialogVisible = false
      this.getinterviewSkillsList()
    }
  }
}
</script>

<style scoped lang="less">
.container {
  box-sizing: border-box;
  .interviewSkills {
    margin: 10px;
  }
  .SearchStyle {
    display: flex;
    .SearchInput {
      width: 200px;
    }
    .Searchbtn {
      margin-left: -65px;
    }
  }
  .el-alert {
    margin-bottom: 10px;
  }
  .skills {
    margin-left: 45px;
  }
  .el-pagination {
    margin-top: 10px;
  }
  .el-icon-film {
    color: #1914ff;
  }

  /deep/.el-dialog__header {
    height: 45px;
  }
  .previewDialog {
    /deep/.el-dialog__body {
      padding: 0 20px;
    }
  }
}
</style>
